<template>
    <v-layout type="main">
        <div class="detail-layout">
            <el-steps :active="active" v-if="active != 9" simple class="my-steps">
                <el-step title="基本信息" icon="el-icon-edit"></el-step>
                <!-- <el-step title="上传文件" icon="el-icon-upload"></el-step> -->
                <el-step title="启动" icon="el-icon-picture"></el-step>
                <el-step title="完成" icon="el-icon-picture"></el-step>
            </el-steps>
            <el-form ref="form" class="form myself-form alick-add-form" :model="formData" :rules="submitRules"
                label-width="120px">
                <div v-if="active == 1 || active == 9">
                    <h3 class="add-alike-title">基本信息</h3>
                    <el-form-item label="名称" prop="name">
                        <el-input type="text" v-model="formData.name" />
                    </el-form-item>
                    <el-form-item label="描述" prop="describe">
                        <el-input type="textarea" :rows="6" v-model="formData.describe" />
                    </el-form-item>
                    <h3 class="add-alike-title">模型信息</h3>
                    <div>
                        <el-form-item label="模型">
                            <el-radio-group v-model="visibility" @change="getModelList">
                                <el-radio :label="0">私有的</el-radio>
                                <el-radio :label="1">共享的</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item prop="model_id">
                            <el-select v-model="formData.model_id" @change="changeModel" style="width:100%;"
                                :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
                                <el-option v-for="item in modelOptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="版本" prop="model_version_id">
                            <el-select v-model="formData.model_version_id" @change="changeModelVersion" style="width:100%;"
                                :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
                                <el-option v-for="item in modelVersionOptions" :key="item.id" :label="item.version"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <h3 class="add-alike-title">推理环境信息</h3>
                    <el-form-item label="推理环境" prop="">
                        <el-radio-group v-model="engineVisibility" @change="changeVisibility()" size="small">
                            <el-radio :label='2'>公开的</el-radio>
                            <el-radio :label='1'>共享的</el-radio>
                            <el-radio :label='0'>我的</el-radio>
                            <el-radio :label='3'>边缘节点</el-radio>
                        </el-radio-group>
                        <div class="select">
                            <el-select v-model="formData.image_id" class="full-extent-select">
                                <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="命令行">
                        <el-input type="text" v-model="formData.main_entry" />
                    </el-form-item> -->

                    <!-- <el-form-item label="资源组">
                        <el-select v-model="formData.product_id" class="full-extent-select">
                            <el-option v-for="item in productOptions" :value="item.id" :label="item.name"
                                :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- <el-form-item label="数量">
                        <el-input-number  v-model="formData.copy"></el-input-number>
                    </el-form-item> -->
                    <!-- <el-form-item label="端口" prop="name">
                        <div class="outin-box" v-for="(e, i) in formData.port_list" :key="i">
                            <div class="port-lis">
                                <el-radio-group v-model="e.protocol" class="port-lis-radio">
                                    <el-radio :label="2">tcp</el-radio>
                                    <el-radio :label="1">http</el-radio>
                                </el-radio-group>
                                <el-input type="text" v-model="e.port" class="port-el-input" />
                            </div>
                            <span class="outin-handle">
                                <a href="javascript:;" @click="addPort(i)" v-if="i == formData.port_list.length - 1">增加</a>
                                <span v-else class="slot-btn"></span>
                                <a href="javascript:;" @click="delPort(i)" v-if="formData.port_list.length > 1">删除</a>
                            </span>
                        </div>
                    </el-form-item> -->

                    <el-form-item label="选择边缘节点" prop="edgeNodeArray">
                        <el-select v-model="formData.edgeNodeArray" multiple placeholder="请选择" class="full-extent-select">
                            <el-option v-for="item in nodeOptions" :key="item.name" :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="端口" prop="port">
                        <el-input type="text" v-model="formData.port" />
                    </el-form-item>
                </div>

                <!-- <div v-if="active == 2">
                    <p class="uploader-hint">文件会上传到/workspace目录下，会持久保存，重启容器时不会丢失</p>
                    <el-form-item label="上传文件 " prop=" ">
                        <wrapUploader @succeedOver="succeedOver" type="workspace" :taskId="path" :biz_id="bizId" />
                    </el-form-item>
                </div> -->
                <div v-show="active == 2">
                    <p class="succeed-hint">模型部署修改成功</p>
                    <div class="succeed-btn">
                        <a href="javascript:;" class="start" @click="startDeploy">启动</a>
                        <a href="javascript:;" class="go" @click="toDetail">立即前往</a>
                    </div>
                </div>

                <el-form-item label=" ">
                    <el-button class="none-type" type="primary" @click="addDeploy" v-if="active == 1">下一步</el-button>
                    <!-- <el-button class="none-type" @click="upStep" v-if="active == 2">上一步</el-button> -->
                    <!-- <el-button class="none-type" type="primary" @click="nextStep" v-if="active == 2">下一步</el-button> -->
                    <el-button class="none-type" type="primary" @click="updateCommit" v-if="active == 9">确定</el-button>
                </el-form-item>

            </el-form>
        </div>
    </v-layout>
</template>
  
<script>
import { labelDicts } from '@/utils/maps'
import { addDeploy, putDeploy, getDeployDetail, getAllEdgeNode } from '@/api/edgeDeploy'
import { getAllProducts } from '@/api/product'
import { getAllModels, getModelDetail } from '@/api/model'
import { getAllModelVersions } from '@/api/modelversion'
import { getAllImages } from '@/api/image'
export default {
    data() {
        return {
            active: 1,
            formData: {
                model_source: '2',
                // copy: 1,
                // port_list: [{ protocol: 2 }]
                port: "",
            },
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                alias: [
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                describe: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                port: [
                    { required: true, message: "该项为必填项" },
                ],
            },
            visibility: 0,
            engineVisibility: 2,
            engine: 0,
            labelDicts,
            imageOptions: [],
            productOptions: [],
            modelVersionOptions: [],
            modelOptions: [],
            deploy: {},
            path: this.$route.query.id,
            bizId: this.$route.query.id,
            nodeOptions: [],
            edgeNodeArray: []
        };
    },
    async created() {
        this.getData()
    },
    mounted() {
    },
    destroyed() { },
    methods: {
        async getData() {
            console.log('query', this.$route.query.id)
            if (this.$route.query.id) {
                let res = await getDeployDetail({ id: this.$route.query.id })
                this.formData = res.data
                this.active = 9
            }
            this.getProductList()
            this.getModelList()
            this.changeVisibility()
            this.getEdgeNodeList()
        },
        async getModelList() {
            let res = await getAllModels({ visibility: this.visibility })
            this.modelOptions = res.data
        },
        async getModelVersionList() {
            let res = await getAllModelVersions({ model_id: this.formData.model_id })
            this.modelVersionOptions = res.data
            this.formData.model_version_id = this.modelVersionOptions[0].id
            this.$forceUpdate()
        },

        async getProductList() {
            let res = await getAllProducts()
            this.productOptions = res.data
        },

        async changeVisibility() {
            let res2 = await getAllImages({ visibility: this.engineVisibility, type: 2 })
            this.imageOptions = res2.data
        },

        async getEdgeNodeList() {
            let res3 = await getAllEdgeNode({ visibility: this.engineVisibility, type: 2 })
            this.nodeOptions = res3.data

        },

        async changeModel() {
            await getModelDetail({ id: this.formData.model_id })
            this.getModelVersionList()
        },
        async changeModelVersion() {
            console.log("changeModelVersion")

        },
        addPort() {
            this.formData.port_list.push({ protocol: 2 })
        },
        delPort(i) {
            this.formData.port_list.splice(i, 1)
        },
        /**
         * 添加
       */
        addDeploy() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.$route.query.id) {
                        this.active = 2;
                    } else {
                        let res = await addDeploy(this.formData);
                        this.formData = res.data
                        this.bizId = res.data.id
                        if (res && res.data) {
                            this.active = 2;
                        }
                    }
                }
            })
        },
        /**
         * 启动
         */
        startDeploy() {

        },

        nextDone() {
            this.active = 4;
        },
        nextStep() {
            this.active = 3;
        },
        /**
         * 提交
         */
        async updateCommit() {
            await putDeploy({ ...this.deploy, ...this.formData })
            this.toDetail()
        },
        toDetail() {
            let query = {
                id: this.formData.id
            }
            if (this.$route.query.id) {
                query = {
                    id: this.$route.query.id
                }
            }
            this.$router.push({
                path: '/deploy/code',
                query
            })
        },
        async getDetail() {
            if (this.$route.query.id) {
                let res = await getDeployDetail(this.$route.query.id)
                this.formData = res.data
            }
        },
        succeedOver(data) {
            console.log(data)
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>